<template>
  <el-dialog
    :title="formData.id ?'编辑部门' :'添加部门'"
    width="50%"
    :visible="visible"
    @close="$emit('update:visible',false)"
  >
    <!--优化代码:visible="visible" @close="$emit('xxx',false)" -->
    <span class="dialog-footer">
      <el-form ref="formRef" size="small" label-width="120px" :model="formData" :rules="rules">
        <el-form-item label="部门名称" prop="name">
          <el-input v-model="formData.name" placeholder="2-10个字符" />
        </el-form-item>
        <el-form-item label="部门编码" prop="code">
          <el-input v-model="formData.code" placeholder="2-10个字符" />
        </el-form-item>
        <el-form-item label="部门负责任人" prop="managerId">
          <el-select v-model="formData.managerId" style="width: 100%;" placeholder="请选择负责人">
            <el-option v-for="item in manageList" :key="item.id" :value="item.id" :label="item.username" /> <!-- 组件中渲染文本不支持插值，用v-bind：label=值 -->
          </el-select>
        </el-form-item>
        <el-form-item label="部门介绍" prop="introduce">
          <el-input v-model="formData.introduce" type="textarea" placeholder="1-100个字符" />
        </el-form-item>
        <el-form-item>
          <el-row justify="center">
            <el-button type="primary" @click="onSubmit">确定</el-button>
            <el-button @click="$emit('update:visible',false)">取消</el-button>
          </el-row>
        </el-form-item>
      </el-form>
    </span>
  </el-dialog>
</template>

<script>
import { editDpmAPI, getDepartmentListAPI, getDpmAPI, getDpmDetailAPI, getManagerAPI } from '@/api/department'
/* 1.表单校验
1.定义formdata对象
2.定义rules
3.在form标签中绑定：model，：rules，ref
4.在item绑定 prop
5.在表单标签中v-model
6.给确定按钮绑定onSubmit时间，提交再次触发整个校验

2.添加部门和添加部门编码自定义校验
1.定义一条自定义规则，表单失焦时校验
2.调用获取部门数据列表，拿当前用户输入内容与列表内容进行校验
3.内容致提示用户不通过校验，一直直接通过校验
*/

/* 3.部门负责人下拉列表数据
1.封装api，拿到数据
2.把数据复制到data中的变量
3.option用v-for循环就进行数据列表

*/

/* 4.新增部门接口传参除了四个数据外，还需要传入父id，通过父传子传输
1.在父组件中定义一个变量pid=null
2.当点击打开对话框组件时把id传输过来
3.子组件接受pid，数值类型需要用完整写法
*/

/* 5.新增页面点击提交按钮
1.封装获取新增数据API
2.当所有校验都通过时，调用api
3.当新增成功，子组件提示用户新增成功
4.传递visible为false给父组件
5.在给一个时间给父组件。父组件监听此事件，调用刷新界面接口

*/

/* 6.当弹出层关闭时，重置表单
1.watch监听器监听父传递过来的visible
2.当visible为false代表弹出层关闭，就重置表单
*/

/* 7.表单数据回填
1.封装部门详情api
2.在子组件定义一个调用api方法
3.在父组件中当点击编辑按钮时利用refs拿到组件中的调用api方法，并传递数据
4.当父组件调用方法时，子组件就能接收到数据，进行回填
*/

/* 8.设置弹出层标题
1.直接用三元判断formData.id存不存在，存在一定是编辑，不存在是添加
2.因为关闭弹出层清除表单数据只是清除输入框数据，其他数据例如id手动清除
3.因为数据回来是异步的，当id回来的弹出已经打开，所以标题会一闪的情况
4.可以在父组件直接用$refs直接给他赋值id
 */

/* 9.当编辑时不校验当前项
1.失去焦点利用id过滤当前项
2.再去做校验，编辑回显时就不会校验当前错误了
3.其他校验逻辑正常写
 */

/* 10.编辑步骤
 1.当所有校验通过，判定当前弹出层是编辑还是添加
 2.编辑调用编辑api
 3.成功发送时，提示用户
 4.通知父组件
 5.父组件再次渲染数据

 */
export default {
  props: {
    visible: Boolean,
    pid: {
      default: null,
      type: Number
    }
  },
  data() {
    return {
      formData: {
        name: '', // 部门名称
        code: '', // 部门编码
        managerId: '', // 负责人名称
        introduce: '' // 部门介绍
      },
      rules: {
        name: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
          { min: 2, max: 10, message: '2-12字符', trigger: 'blur' },
          { validator: async(rule, value, callback) => {
            const res = await getDepartmentListAPI()
            if (this.formData.id) {
              console.log(123456)
              // 当状态是编辑是校验时候需要把当前项过滤掉不校验
              res.data = res.data.filter(item => item.id !== this.formData.id)
              console.log(res.data)
            }
            if (res.data.some(v => v.name === value)) {
              callback(new Error('部门已存在'))
            } else {
              callback()
            }
          }, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入部门编码', trigger: 'blur' },
          { min: 2, max: 10, message: '2-12字符', trigger: 'blur' },
          { validator: async(rule, value, callback) => {
            let { data } = await getDepartmentListAPI()
            if (this.formData.id) {
              // 当状态是编辑是校验时候需要把当前项过滤掉不校验
              data = data.filter(item => item.code !== value)
            }
            const hasOldCode = data.some(v => v.id === this.formData.id)
            console.log('hasOldCode  --->', hasOldCode)
            if (hasOldCode) {
              console.log('2222  --->', 2222)
              callback(new Error('部门编码已存在'))
            } else {
              callback()
            }
          }, trigger: 'blur' }
        ],
        managerId: [
          { required: true, message: '请选择负责人名称', trigger: 'blur' }
        ],
        introduce: [
          { required: true, message: '请输入部门介绍', trigger: 'blur' },
          { min: 1, max: 100, message: '1-100字符', trigger: 'blur' }
        ]
      },
      manageList: []
    }
  },
  watch: {
    visible(newValue) {
      if (!newValue) {
        this.$refs.formRef.resetFields()
        // 当页面表单关闭时，formData也要重置数据
        this.formData = {
          name: '', // 部门名称
          code: '', // 部门编码
          managerId: '', // 负责人名称
          introduce: '' // 部门介绍
        }
      }
    }
  },
  async created() {
    // 获取管理者列表
    const { data } = await getManagerAPI()
    this.manageList = data
  },
  methods: {
    // 点击提交时执行的逻辑
    async onSubmit() {
      if (this.formData.id) {
        await editDpmAPI(this.formData)
        this.$message.success('修改成功')
      } else {
        await this.$refs.formRef.validate()
        await getDpmAPI({ ...this.formData, pid: this.pid })
        this.$message.success('新增部门成功')
      }
      this.$emit('update:visible', false)
      this.$emit('onSuccess')
    },
    // 封装一个获取部门详情方法
    async getDpmDetail(id) {
      const { data } = await getDpmDetailAPI(id)
      this.formData = data
      console.log('data  --->', data)
    }
  }
}
</script>
